<template>
	<div class="wy_container">
		<!-- <div class="wy_header">
			<van-sticky>
				<van-nav-bar title="网易严选" style="background: #fafafa;">
					<template #left>
						<router-link to="/home">
							<van-icon name="wap-home-o" size="32" color="#333" />
						</router-link>
					</template>
					<template #right>
						<van-icon name="search" size="32" color="#333" />
						<router-link to="/cart">
							<van-icon name="cart" size="32" color="#333" />
						</router-link>
					</template>
				</van-nav-bar>
				<div class="wy_header_1">
					<van-tabs v-model:active="active" @click-tab="handleChange">
						<van-tab v-for="item in categorydetail" :key="item.id" :title="item.name"></van-tab>
					</van-tabs>
				</div>
			</van-sticky>
		</div> -->

		<LoginHeader>
			<div class="login-nav-center">
      </div>
		</LoginHeader>
		
		<div class="card_list">
			<!-- <div class="block"></div> -->
			<!--  -->
			
			<div class="card_title1" >{{categoryItemslist1.frontName }}</div>
			<div class="card_goods">
				<div class="goods_card_container" v-for="card in categoryItemslist" :key="card.id">
					<img @click="toGoods(card)" :src="card!.listPicUrl" mode="widthFix" class="card_img" />
					<!-- 卡片内容区 -->
					<div class="card_content">
						<div class="card_head">
							<img src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" class="logo"/>
							<span class="card_title">{{ card.name }}</span>
						</div>
						<!--在定义的组件中无法使用全局定义的样式 -->
						<div class="card_price_remaket">
							<div class="card_info">到手￥</div>
							<div class="card_price"> {{ card.retailPrice }}</div>
							<div class="card_remarket">￥ {{ card.sortOriginPrice }}</div>
						</div>
						<div class="card_coupon">满200减30</div>
					</div>
				</div>
			</div>
		</div>
		
		<van-back-top right="5vw" bottom="5vh" />
	    <div class="card_bottom">更多内容尽情期待</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { categoryModel, categoryDataModel, anyObjModel } from '@/api/category'
import categoryApi from '@/api/category'
import { onMounted } from 'vue';
import { useRoute } from "vue-router";
import router from '@/router';
const route = useRoute()
const active = ref(0)

const categorydetail = ref<categoryModel[]>([])
const categoryItemslist = ref<anyObjModel[]>([])
const categoryItemslist1 = ref<anyObjModel>([])

// 获取某个分类下的商品列表
const categorydetailData = async (superCategoryId: string, categoryType: string, id: string) => {
	try {
		let result = await categoryApi.getCategoryDataList(superCategoryId, categoryType, id)
		categorydetail.value = result.data.categoryL2List
		categoryItemslist.value = result.data.categoryItems!.itemList
		categoryItemslist1.value = result.data.categoryItems!.category
	} catch (error) {
		console.log(error);

	}
}

// 数据同步
function handleChange(e:any){
	categorydetail.value.forEach(item =>{
		// console.log(item);
		if(item.name == e.title){
			categorydetailData(item.categoryType,item.id,item.superCategoryId)
			// console.log(item.superCategoryId,item.categoryType,item.id);
		}
	})
}
onMounted(() => {
	categorydetailData(route.params.superCategoryId as string, route.params.categoryType as string, route.params.id as string)
})

const toGoods = (card:anyObjModel) => {
	console.log(card);
	
	router.push(`/goods/goodsdetail/${card.id}`)
}

</script>

<style lang="less" scoped>


.wy_container {

	.login-nav-center {
			width: 86px;
			height: 27px;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 15px auto;
			font-size: 20px;
			font-weight: bold;
			background: url('../../../assets/icon.png') -78px -211px;
			background-size: 235px;
			// background-position: 399 0 126 0;
	}
	.wy_header_1 {
		width: 100%;
		height: 30px;
		font-size: 18px;
		text-align: center;

		background: #fff;
		color: red;
	}



	.card_list {
		background: #fff;
		margin-top: 20px;
		.card_title1 {
			text-align: center;
			font-size: 15px;
			
		}

		.card_goods {
			background: #fff;
			flex-wrap: wrap;
			margin-top: 20px;
			display: flex;
			.goods_card_container {

				width: 172px;
				padding: 0 10px 26px 5px;

				.card_img {
					width: 100%;

					background: #fff;
					vertical-align: bottom;
				}

				.card_content {

					background: #fff;
					padding-bottom: 40rpx;

					.card_head {
						// display: flex;
						// height: 40px;
						margin-top: 5px;
						.card_title {
							font-size: 14px;
							margin-left: 5px;
							/* 单行文本溢出省略号代替 */
						}

						.logo {
							height: 15px;
							width: 15px;
						}
					}

				}

				.card_price_remaket {
					display: flex;
					/* 
							space-around: 个体和边界处的空白是个体和个体出的空白的1/2
							space-evenly: 真正平分空白
							*/
					height: 30px;
					line-height: 30px;

					.card_remarket {

						color: #999;
						font-size: 14px;
						text-decoration: line-through;
						margin-left: 5px;
					}

					.card_price {
						font-size: 22px;
						color: #fa1e32;
						font-weight: bold;
					}

					.card_info {
						font-size: 14px;
						color: #fa1e32;
						font-weight: bold;
					}
				}

				.card_coupon {
					width: 95px;
					height: 19px;
					background: rgb(250, 30, 50);
					color: #fff;
					font-weight: bold;
					font-size: small;
					text-align: center;
					border-radius: 50px;
				}
			}
		}
	}
	.card_bottom {
		font-size: 14px;
		color: #999;
		text-align: center;
		padding: 15px;
	}
}
</style>